<!--  -->
<template>
  <div class="vehicle-container flex-column flex-sub">
    <el-tabs v-model="queryInfo.recordsPersonVo.identityEnum" @tab-click="getCardPageList">
      <el-tab-pane label="园内员工" name="INTERNAL_MEMBER"></el-tab-pane>
      <el-tab-pane label="园外访客" name="VISITOR"></el-tab-pane>
    </el-tabs>
    <div class="flex-row justify-between align-center pd-tb-6">
      <!-- 添加按钮 -->
      <div class="flex">
        <custom-button class="pd-right-20" @click="handleAdd" title="新增档案" />
        <custom-button title="删除" @click="handleDelBatch" />
      </div>

      <div>
        <el-input v-model="queryInfo.keyword" placeholder="请输入搜索条件" @input="getCardPageList">
          <!-- <el-button slot="append" type="default" icon="el-icon-search"></el-button> -->
          <i class="el-icon-search el-input__icon" slot="suffix" @click.stop="getCardPageList"></i>
        </el-input>
      </div>
    </div>

    <!-- table -->
    <div class="flex-sub table-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
        @selection-change="setSelection"
      >
        <el-table-column type="selection" width="55" key="1" />
        <el-table-column label="人员头像" key="2">
          <template slot-scope="scope">
            <img
              v-if="scope.row.fileId"
              :src="scope.row.fileId|imageFormat"
              height="30px"
              width="30px"
            />
            <img v-else src="./img/people.png" height="30px" width="30px" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="人员名称" key="3" />
        <template v-if="isInner">
          <el-table-column prop="orgName" label="所属企业" key="4" />
          <el-table-column prop="position" label="职位" key="5" />
        </template>
        <el-table-column
          label="操作"
          :width="handleScreenWidthToVw(100)+'px'"
          align="center"
          key="6"
        >
          <template slot-scope="scope">
            <div class="flex-row">
              <div class="btn-edit" @click="handleClick(scope.row)">修改</div>
              <div class="pd-lr-10 fz-14" style="color: #333;">|</div>
              <div class="btn-delete" @click="handleDelete(scope.row.id)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :total="total"
      :page-size="queryInfo.pageSize"
      @current-change="handlePageChange"
    />
    <edit-dialog
      ref="editDialog"
      :init-data="initData"
      :is-show="isShowEdit"
      @close="handleCloseEdit"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import {
  findRecordsPersonPageByParam,
  addPersonRecord,
  updateRecordsPerson,
  apiDeleteProfile,
  delRecordsPersonBatch,
} from './api.js'
import dayjs from 'dayjs'
import EditDialog from './components/edit-dialog'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  components: { EditDialog },

  filters: {
    dateFormat(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  data() {
    return {
      queryInfo: {
        keyword: '',
        pageSize: 10,
        pageNo: 1,
        recordsPersonVo: { identityEnum: 'INTERNAL_MEMBER' },
      },
      total: 0,
      tableData: [],
      selection: [],
      isShowEdit: false,
      isAdd: false,
      selectId: '',
      initData: {},
      loading: false,
    }
  },

  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    isInner() {
      return this.queryInfo.recordsPersonVo.identityEnum === 'INTERNAL_MEMBER'
    },
  },

  created() {
    this.getCardPageList()
  },
  methods: {
    setSelection(selection) {
      this.selection = selection.map(item => {
        return item.id
      })
    },
    async handleDelBatch() {
      if (this.selection.length === 0) {
        this.$message.error('请选择至少一个文档后再进行删除操作')
      } else {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          try {
            await delRecordsPersonBatch(this.selection)
            this.$message.success('删除成功！')
            this.getCardPageList()
          } catch (msg) {
            this.$message.error(msg)
          }
        })
      }
    },
    handleReset() {
      this.queryInfo.userName = ''
      this.queryInfo.phone = ''
      this.getCardPageList()
    },
    handleAdd() {
      this.isAdd = true
      this.isShowEdit = true
      this.initData = {
        title: '新增',
        identityEnum: this.queryInfo.recordsPersonVo.identityEnum,
        orgName: '',
        orgId: '',
        superiorEnum: 'SUPERVISOR',
        position: '',
        userId: '',
        userName: '',
        carId: null,
        recordCarIds: [],
        remark: '',
      }
    },
    async getCardPageList() {
      this.loading = true
      try {
        const data = await findRecordsPersonPageByParam({ ...this.queryInfo })
        if (!data) return

        this.total = data.total || 0
        this.tableData = data.records || 0
      } finally {
        this.loading = false
      }
    },
    handleCloseEdit() {
      this.initData = {}
      this.isShowEdit = false
    },
    async handleSubmit(form) {
      try {
        this.isAdd ? await addPersonRecord(form) : await updateRecordsPerson(form)
        this.$message.success(this.isAdd ? '新增成功！' : '修改成功！')
        this.isShowEdit = false
        this.getCardPageList()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.$refs.editDialog && this.$refs.editDialog.handleCloseLoading()
      }
    },
    async handleClick(item) {
      this.isAdd = false
      this.initData = { ...item }
      this.isShowEdit = true
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await apiDeleteProfile(id)
          this.$message.success('删除成功！')
          this.getCardPageList()
        } catch (msg) {
          this.$message.error(msg)
        }
      })
    },
    handlePageChange(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.getCardPageList()
    },
  },
}
</script>
<style lang="scss" scoped>
.vehicle-container {
  width: 100%;
  height: 100%;
  padding: vw(10px) vw(20px) vw(20px) vw(20px);
  background: #fff;
  box-sizing: border-box;
}

.query-container {
  display: flex;
  flex-direction: row;
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

::v-deep {
  .el-tabs__item.is-active {
    color: #d12d1f;
  }

  .el-tabs__active-bar {
    background-color: #d12d1f;
    height: 3px;
  }

  .el-table-column--selection .cell {
    padding-left: vw(20px);
  }
}
</style>
